﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Telemetry Charting Test</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.2.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/timepicker.js"></script>

    <script language="javascript" type="text/javascript">
    <!--
        $(function() {
            $('.datetime').datepicker({
                duration: '',
                showTime: true,
                constrainInput: false,
                stepMinutes: 1,
                stepHours: 1,
                altTimeField: '',
                time24h: false
            });
        });
        
        function getChart() {
            // GATHER FORM VARS ------------------------------------------>

            var strSensorId = $('input[name=sensorId]:checked').val();
            var strMkrSize = $('#mkrSize :selected').val()
            var strStartDate = $('#startDateTxt').val();
            var strEndDate = $('#endDateTxt').val();
            var chkTemp = $('#tempChkBox:checked').val();
            var chkRH = $('#rhChkBox:checked').val();
            var chkDewPnt = $('#dewPntChkBox:checked').val();
            var mkrChkBox = $('#mkrChkBox:checked').val();
            var toolTip = $('#ttChkBox:checked').val();

            // CREATE XML CONFIG STATIC HEADER/FOOTER --------------------->
            
            var strXMLTop = "<?xml version=\"1.0\" encoding=\"utf-8\"?><root><Chart Name=\"PriceHistory1\"><Uri>" +
                "<Path>http://localhost:55059/Services/GetTelemetryData.aspx</Path>" + 
                "<Param Name=\"sensors\">" + strSensorId + "</Param>" +
                "<Param Name=\"startdate\">" + strStartDate + "</Param>" +
                "<Param Name=\"enddate\">" + strEndDate + "</Param></Uri>";
            var strXMLEnd = "<Param name=\"BackColor\">White</Param><Param name=\"Height\">320</Param>" +
                "<Param name=\"Width\">675</Param>" +
                "<Legend><Param name=\"Enabled\">true</Param><Param name=\"Docking\">Bottom</Param>" +
                "<Param name=\"Alignment\">Center</Param><Param name=\"BorderColor\">Black</Param>" +
                "<Param name=\"BorderWidth\">1</Param><Param name=\"ShadowColor\">Black</Param>" +
                "<Param name=\"ShadowOffset\">1</Param></Legend><ChartArea><AxisY>" +
                "<Param name=\"Title\">Degrees Celcius</Param><Param name=\"GridLines\">false</Param>" +
                "</AxisY><AxisY2><Param name=\"Title\">Percent</Param><Param name=\"GridLines\">false</Param>" +
                "</AxisY2><AxisX><Param name=\"Title\">Avg value per minute</Param><Param name=\"GridLines\">false</Param>" +
                "</AxisX></ChartArea></Chart></root>";
                
            // GATHER XML DATA VALUES -------------------------------------->

            var strXMLData = "<Data><SeriesDefinitions><Series id=\"Read Date\"><Data>/Telemetry/Data/read_date</Data>" +
                "<Param name=\"IsXAxisLabel\">true</Param></Series>";

            if (chkTemp != null) {
                strXMLData += "<Series id=\"Temperature\"><Data>/Telemetry/Data[sensor_id[.='" + strSensorId + "']]/temperature</Data>" +
                    "<Param name=\"ChartType\">Line</Param>";
                
                if (mkrChkBox != null) {
                    strXMLData += "<Param name=\"MarkerStyle\">Triangle</Param><Param name=\"MarkerSize\">" + strMkrSize + "</Param>" +
                    "<Param name=\"MarkerColor\">Blue</Param>"
                }
                if (toolTip != null) {
                    strXMLData += "<Tooltip>Date = #VALX{f}\nTemp = #VALY{n}°C</Tooltip>"
                }
                strXMLData += "</Series>";    
            }

            if (chkRH != null) {
                strXMLData += "<Series id=\"RH\"><Data>/Telemetry/Data[sensor_id[.='" + strSensorId + "']]/humidity</Data>" +
                    "<Param name=\"ChartType\">Line</Param><Param name=\"YAxisType\">Secondary</Param>";
                if (mkrChkBox != null) {
                    strXMLData += "<Param name=\"MarkerStyle\">Diamond</Param><Param name=\"MarkerSize\">" + strMkrSize + "</Param><Param name=\"MarkerColor\">Orange</Param>"
                }
                if (toolTip != null) {
                    strXMLData += "<Tooltip>Date = #VALX{f}\nHudmidity = #VALY{n}%</Tooltip>"
                }
                strXMLData += "</Series>";    
            }

            if (chkDewPnt != null) {
                strXMLData += "<Series id=\"Dew Pnt\"><Data>/Telemetry/Data[sensor_id[.='" + strSensorId + "']]/dew_point</Data>" +
                    "<Param name=\"ChartType\">Line</Param>";
                if (mkrChkBox != null) {
                    strXMLData += "<Param name=\"MarkerStyle\">Square</Param><Param name=\"MarkerSize\">" + strMkrSize + "</Param><Param name=\"MarkerColor\">Red</Param>"
                }
                if (toolTip != null) {
                    strXMLData += "<Tooltip>Date = #VALX{f}\nDew Point = #VALY{n}°C</Tooltip>"
                }
                strXMLData += "</Series>";                        
            }

            strXMLData += "</SeriesDefinitions></Data>";

            // PROCESS XML ----------------------------------------------->

            var strXML = strXMLTop + strXMLData + strXMLEnd;
            //window.alert(strXML);
            loadChartImage(strXML);
        }

        function loadChartImage(xml) {
            var resultsDiv = $('#chartImage');
            var toolTip = $('#ttChkBox:checked').val();

            var chartUrl = "/Services/GetStaticChartImage.aspx";

            if (toolTip != null) {
                chartUrl = "/Services/GetChartImageMap.aspx";
            }

            $.ajax({
                url: chartUrl,
                type: "POST",
                processData: false,
                contentType: "text/xml",
                data: xml,
                success: function(data) {
                    resultsDiv.html(data);
                }
            });
        }
        
        
    -->
    </script>
</head>
<body>
<table width="600">
    <tr>
        <td style="height:350px; border: solid thin black;"><div id="chartImage"></div></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="tempChkBox" name="tempChkBox" value="1" />Temp
            <input type="checkbox" id="rhChkBox" name="rhChkBox" value="1" />RH
            <input type="checkbox" id="dewPntChkBox" name="dewPntChkBox" value="1" />Dew Point 
        </td>       
    </tr>
    <tr>
        <td>
            Start date: <input type="text" size="10" maxlength="10" id="startDateTxt" class="datetime" name="startDateTxt" value="1/12/2010" />
            End date: <input type="text" size="10" maxlength="10" id="endDateTxt" class="datetime" name="endDateTxt"  value="1/13/2010" />
        </td>
    </tr>
    <tr>
        <td>
            Sensor Id: 091F0022 <input type="radio" id="091F0022Rdo" name="sensorId" checked="checked" value="091F0022" />
            0A3E10D8 <input type="radio" id="0A3E10D8Rdo" name="sensorId" value="0A3E10D8" />
            091F0064 <input type="radio" id="091F0064Rdo" name="sensorId" value="091F0064" />
            0A3E018B <input type="radio" id="0A3E018BRdo" name="sensorId" value="0A3E018B" />
        </td>
    </tr>
    <tr>
        <td>
           <input type="checkbox" id="ttChkBox" name="ttChkBox" checked="checked" value="1"/> Tooltips 
           <input type="checkbox" id="mkrChkBox" name="mkrChkBox" checked="checked" value="1"/> Marker
           <select name="mkrSize" id="mkrSize">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4" selected="selected">4</option>
               <option value="5">5</option>
               <option value="6">6</option>
           </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" name="submitBtn" value="Submit" onclick="javascript:getChart();" />
        </td>
    </tr>
</table>
</body>
</html>
